<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:600px;
				height:500px;
				border:4px solid red;
			}
		</style>
		<script src='jquery-3.4.1.js'></script>
		<script src='jquery.easing.1.3.js'></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//创建一个新的h2标签追加到box中
					$("#box").append('<h2>我是新来的</h2>')
		     		
				})
				//给每个h2添加单击事件
//				$("#box h2").click(function(){
//					alert('后盾人');
//				})
				
				//给未来元素加事件 (delegate live)一般不用 
				//把#box事件委托给他里面的的h2事件
				$("#box").on('click','h2',function(){
					alert('哈哈哈');
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id='btn' value='我是按钮' />
		<div id='box'>
			<h2>后盾人 人人做后盾0</h2>
			<h2>后盾人 人人做后盾1</h2>
			<h2>后盾人 人人做后盾2</h2>
			<h2>后盾人 人人做后盾3</h2>
			<h2>后盾人 人人做后盾4</h2>
		</div>
	</body>
</html>
